import React from 'react'
import {Row, Col, Card} from 'antd'
import {
    Menu,
    Icon,
    Tabs,
    message,
    Form,
    Input,
    Button,
    Checkbox,
    Modal,
    notification,
    Pagination
} from 'antd'
const FormItem = Form.Item
const TabPane = Tabs.TabPane
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
import {Router, Route, Link, browserHistory} from 'react-router'

class CommonComments extends React.Component {
    constructor() {
        super()
        this.state = {
            allcomments:'',
            comments: '',
            pageTotal:'',
            value:'1'
        }
    }
    componentDidMount() {
        const myFetchOptions = {
            method: 'GET'
        }
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getcomments&uniquekey=" + this.props.uniquekey, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({
                    allcomments: json,
                    comments: json.slice((this.state.value-1)*10,(this.state.value-1)*10+10),
                    pageTotal:json.length
                })
            })
    }
    
    onChange(pageNumber) {
        console.log('Page: ', pageNumber);
        const {allcomments}=this.state
        this.setState({
            value:pageNumber,
            comments: allcomments.slice((pageNumber-1)*10,(pageNumber-1)*10+10)
        })
    }

    handleSubmit(e) {
        e.preventDefault()
        const myFetchOptions = {
            method: 'GET'
        }
        const formData = this.props.form.getFieldsValue()
        /* 因为api为模拟接口 所以不能看到提交的数据*/
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=comment&userid=" + localStorage.userid + "&uniquekey=" + this.props.uniquekey + "&comment=" + formData.remark, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.componentDidMount()
            })
            this.props.form.resetFields()
    }
    addUserCollection() {
        const myFetchOptions = {
            method: 'GET'
        }
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=uc&userid=" + localStorage.userid + "&uniquekey=" + this.props.uniquekey, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                notification['success']({message: 'React News', description: '收藏成功'})
            })
    }

    render() {
        const {getFieldDecorator} = this.props.form     
        const {pageTotal}=this.state
        const page = pageTotal>10?<Pagination showQuickJumper size="small" defaultCurrent={1} defaultPageSize={10} total={pageTotal} onChange={this.onChange.bind(this)}/>:<div>没有数据了...</div>
        const {comments} = this.state
        const commentsList = comments.length
            ? comments.map((comment, index) => (
                <Card key={index} title={comment.UserName} extra={< a href = "javascript:void(0)" > 发表于 {comment.datetime} </a>}>
                    <p>{comment.Comments}</p>
                </Card>
            ))
            : "没有加载到数据"
        return (
            <div className="comment">
                <Row>
                    <Col span={24}>
                       {commentsList}
                        {page}
                        <Form onSubmit={this.handleSubmit.bind(this)}>
                            <FormItem label="你的评论">
                                {getFieldDecorator('remark', {
                                    rules: [
                                        {
                                            required: false,
                                            message: '请输入评论!'
                                        }
                                    ]
                                })(<Input placeholder="请输入评论" type="textarea"/>)}
                            </FormItem>
                            <br/>
                            <Button type="primary" htmlType="submit">提交评论</Button>
                            &nbsp;&nbsp;
                            <Button type="primary" htmlType="button" onClick={this.addUserCollection.bind(this)}>收藏该文章</Button>
                        </Form>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default CommonComments = Form.create({})(CommonComments)